<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试卷创编</title>
    <link rel="stylesheet" href="../layui/css/layui.css">

    <style>
        /* 改变layui复选框选中颜色 */
        .layui-form-checked[lay-skin=primary] i {
            border-color: #1890ff !important;
            background-color: #1890ff;
            color: #fff;
        }

        /* 改变layui复选框经过颜色 */
        .layui-form-checkbox[lay-skin=primary]:hover i {
            border-color: #1890ff;
            color: #fff;
        }

        /* 改变layui选择框的背景颜色和字体颜色 */
        .layui-form-select dl dd.layui-this {
            background-color: #409eff;
            color: #dcdfe6;
        }

        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
        /* layui设置按钮样式 */
        .layui-btn{
            border-radius: 4px;
        }
        .layui-laypage .layui-laypage-curr .layui-laypage-em {

            background-color: rgba(30, 159, 255, 0.76) !important
        }
        /* layui 数据表格table行高设置 */
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>

</head>

<body>
    <!-- 导航面包屑 -->
    <div class="x-nav" style="border-bottom: 1px solid #e5e5e5;padding: 0 20px;line-height: 39px;height:39px">
        <span class="layui-breadcrumb" style="font-size: 6px!important;padding-left: 10px;color: #999;">
            <a href="#">首页</a>
            <a href="#">演示</a>
            <a><cite>导航元素</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm"
            style="line-height:1.6em;margin-top:3px;float:right;background-color: rgba(30, 159, 255, 0.76) !important;border-radius: 4px;"
            onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    
    <form class="layui-form" style="margin-top: 30px;width: 1000px;" id="app" v-cloak>

        <div class="layui-form-item" style="width: 400px;">
            <label class="layui-form-label"><span style="color: red;">*</span>年级：</label>
            <div class="layui-input-block">
                <select id="levelName" lay-filter="levelName" lay-search required lay-verify="required">
                    <option value="">请选择</option>

                </select>
            </div>
        </div>

        <div class="layui-form-item" style="width: 400px;">
            <label class="layui-form-label"><span style="color: red;">*</span>学科：</label>
            <div class="layui-input-block">
                <select id="subjectName" lay-filter="subjectName" lay-search required lay-verify="required">
                    <option value="">请选择</option>

                </select>
            </div>
        </div>

        <div class="layui-form-item" style="width: 400px;">
            <label class="layui-form-label"><span style="color: red;">*</span>试卷类型：</label>
            <div class="layui-input-block">
                <select id="paperType" lay-filter="paperType" lay-search required lay-verify="required">
                    <option value=1>固定试卷</option>
                    <option value=2>时段试卷</option>
                    <option value=3>班级试卷</option>

                </select>
            </div>
        </div>

        <div class="layui-form-item" id="date" style="display: none;">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color: red;">*</span>日期范围</label>
                <div class="layui-inline" id="timeTest">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" value="" id="limitStartTime" class="layui-input"
                            placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" value="" id="limitEndTime" class="layui-input" placeholder="结束日期">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>建议时长：</label>
            <div class="layui-input-block" style="width: 290px;">
                <input type="text" id="suggestTime" required lay-verify="required" autocomplete="off"
                    class="layui-input" placeholder="分钟">
            </div>
        </div>


        <div id="titleContent">
            <!-- <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span>标题1：</label>
                <div class="layui-inline" style="width: 700px;">
                    <input type="text" id="title" required lay-verify="required" autocomplete="off"
                        class="layui-input">
                </div>
                <div class="layui-inline" style="font-size:10px;color: #1890ff;cursor: pointer;">
                    <span>添加题目</span>&nbsp;&nbsp;&nbsp;
                </div>

                <div class="layui-input-block" style="width:90%;padding: 30px;margin-top: 10px;-webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);position: relative;">
                    <a style="position: absolute;top: 10px;right: 20px;font-size: 10px;color: #1890ff;cursor: pointer;">删除</a>
                    <input type="hidden" value="11" class="hiddenPaperQuestionId">
                    <input type="hidden" value="11" class="hiddenScore">
                    <div>
                        <span id="title2">数据库打好饭卡刷道具卡发货即可收到回复</span>
                    </div>
                    <div style="margin-top: 30px;">
                        <div style="margin-left: 30px;display: inline-block;">
                            A&nbsp;&nbsp;&nbsp;<span id="questionA2">士大夫撒旦</span>
                        </div>
                        <div style="margin-left: 30px;display: inline-block;">
                            B&nbsp;&nbsp;&nbsp;<span id="questionB2">算法打发士大夫</span>
                        </div>
                        <div style="margin-left: 30px;display: inline-block;">
                            C&nbsp;&nbsp;&nbsp;<span id="questionA2">士大夫撒旦</span>
                        </div>
                        <div style="margin-left: 30px;display: inline-block;">
                            D&nbsp;&nbsp;&nbsp;<span id="questionB2">算法打发士大夫</span>
                        </div>
                    </div>
                </div>

                <div class="layui-input-block"
                    style="width:90%;padding: 30px;margin-top: 10px;-webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);position: relative;">
                    <a
                        style="position: absolute;top: 10px;right: 20px;font-size: 10px;color: #1890ff;cursor: pointer;">删除</a>
                    <div>
                        <span id="title2">数据库打好饭卡刷道具卡发货即可收到回复</span>
                    </div>
                    <div style="margin-top: 30px;">
                        <div style="margin-left: 30px;display: inline-block;">
                            A&nbsp;&nbsp;&nbsp;<span id="questionA2">士大夫撒旦</span>
                        </div>
                        <div style="margin-left: 30px;display: inline-block;">
                            B&nbsp;&nbsp;&nbsp;<span id="questionB2">算法打发士大夫</span>
                        </div>
                        <div style="margin-left: 30px;display: inline-block;">
                            C&nbsp;&nbsp;&nbsp;<span id="questionA2">士大夫撒旦</span>
                        </div>
                        <div style="margin-left: 30px;display: inline-block;">
                            D&nbsp;&nbsp;&nbsp;<span id="questionB2">算法打发士大夫</span>
                        </div>

                    </div>
                </div>

            </div> -->
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>试卷名称：</label>
            <div class="layui-input-block">
                <input type="text" id="examPaperName" required lay-verify="required" autocomplete="off"
                    class="layui-input">
            </div>
        </div>



        <div class="layui-form-item" style="margin-left: 110px;">
            <div class="layui-inline">
                <input type="button" class="layui-btn layui-btn-normal" value="提交" @click="save"
                    style="border-radius: 5px;">
            </div>
            <div class="layui-inline">
                <input type="reset" class="layui-btn layui-btn-primary" value="重置" style="border-radius: 5px;">
            </div>
            <div class="layui-inline">
                <input type="button" class="layui-btn layui-btn-normal" value="添加标题" @click="addTab"
                    style="border-radius: 5px;background-color: #13ce66;">
            </div>
            <div class="layui-inline" id="delTabBtn" v-if="!tabIndex==0">
                <input type="button" class="layui-btn layui-btn-normal" value="删除标题" @click="delTab"
                    style="border-radius: 5px;background-color: #f56c6c;">
            </div>
            <!-- <div class="layui-inline" id="delQuestionBtn" style="display: none;">
                <input type="button" class="layui-btn layui-btn-normal" value="删除试题" @click="delQuestion"
                    style="border-radius: 5px;background-color: #f56c6c;">
            </div> -->
        </div>


    </form>



    <div id="paperQuestionAdd" style="display: none;">
        <!-- 头部工具栏，用script标签包裹 -->
        <script type="text/html" id="searchToolBar">
            <div class="layui-inline">
                <select id="difficult" lay-filter="difficult" lay-search required lay-verify="required">
                    <option value="">难度</option>
                    <option value=1>1</option>
                    <option value=2>2</option>
                    <option value=3>3</option>
                    <option value=4>4</option>
                    <option value=5>5</option>
                </select>
            </div>
            
            <div class="layui-inline">
                <button type="button" id="searchBtn" class="layui-btn layui-btn-sm" lay-event="search"><i class="layui-icon">&#xe615;</i></button>
            </div>

            <div class="layui-inline">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">查看当前选中试题</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">查看当前选中试题数</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addAll">确定</button>
            </div>
            
        </script>

        <!-- 行操作工具栏 -->
        <script type="text/html" id="handleDemo">
            <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="view">预览</a>
        </script>
        <table id="demo" class="layui-hide" lay-filter="paperQuestionList"></table>
    </div>


    <div id="showOne" style="width: 800px;padding: 30px;display: none;">
        <div style="width: 100%;">
            <span class="title2"></span>
        </div>
        <div style="margin-top: 30px;">
            <div style="margin-left: 30px;display: inline-block;">
                A&nbsp;&nbsp;&nbsp;<span class="questionA2"></span>
            </div>
            <div style="margin-left: 30px;display: inline-block;">
                B&nbsp;&nbsp;&nbsp;<span class="questionB2"></span>
            </div>
            <div style="margin-left: 30px;display: inline-block;">
                C&nbsp;&nbsp;&nbsp;<span class="questionC2"></span>
            </div>
            <div style="margin-left: 30px;display: inline-block;">
                D&nbsp;&nbsp;&nbsp;<span class="questionD2"></span>
            </div>
        </div>
    </div>

    <div id="showTwo" style="width: 800px;padding: 30px;display: none;">
        <div style="width: 100%;">
            <span class="title2"></span>
        </div>
        <div style="margin-top: 30px;">
            <div style="margin-left: 30px;display: inline-block;">
                A&nbsp;&nbsp;&nbsp;<span class="questionA2"></span>
            </div>
            <div style="margin-left: 30px;display: inline-block;">
                B&nbsp;&nbsp;&nbsp;<span class="questionB2"></span>
            </div>
            <div style="margin-left: 30px;display: inline-block;">
                C&nbsp;&nbsp;&nbsp;<span class="questionC2"></span>
            </div>
            <div style="margin-left: 30px;display: inline-block;">
                D&nbsp;&nbsp;&nbsp;<span class="questionD2"></span>
            </div>
            <div style="margin-left: 30px;display: inline-block;">
                E&nbsp;&nbsp;&nbsp;<span class="questionE2"></span>
            </div>
        </div>
    </div>

    <div id="showThree" style="width: 800px;padding: 30px;display: none;">
        <div style="width: 100%;">
            <span class="title2"></span>
        </div>
        <div style="margin-top: 30px;">
            <div style="margin-left: 30px;display: inline-block;">
                A&nbsp;&nbsp;&nbsp;<span class="questionA2"></span>
            </div>
            <div style="margin-left: 30px;display: inline-block;">
                B&nbsp;&nbsp;&nbsp;<span class="questionB2"></span>
            </div>
        </div>
    </div>




    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="js/over/exam_paper_add.js"></script>
    <script src="js/over/paperQuestion_add.js"></script>
    <script src="js/xadmin.js"></script>

    <script>
        function addQuestion(index) {
            if ($("#levelName").val() == '') {
                layer.msg("年级选项不能为空", { offset: 't', icon: 5 });
                return;
            }
            if ($("#subjectName").val() == '') {
                layer.msg("学科选项不能为空", { offset: 't', icon: 5 });
                return;
            }
            let did="did"+index;
            sessionStorage.setItem("did",did);

            if(index==1){
                sessionStorage.setItem("addQuestionQuestionType",1);
            }else if(index==2){
                sessionStorage.setItem("addQuestionQuestionType",2);
            }else if(index==3){
                sessionStorage.setItem("addQuestionQuestionType",3);
            }
            
            // xadmin.open('添加试题', 'paperQuestion_add.html');
            layer.open({
                type: 1,
                title: ['添加试题', 'font-size:16px'],
                anim: 5,   // 动画
                resize: false,  // 是否允许拉伸改变宽高
                area: ['1000px', '500px'], // 设置宽，高
                shadeClose: true, //点击遮罩关闭
                scrollbar: false,   // 屏蔽浏览器滚动（false: 则屏蔽）
                content: $("#paperQuestionAdd"),
                success: function (layero,index) {

                    layui.use(['table', 'jquery'], function () {
                        //使用layui的table模块来操作表格
                        let table = layui.table;
                        //使用layui的jquery模块
                        let $ = layui.$;


                        table.render({
                            elem: '#demo',   //引用表格的ID
                            id: 'paperQuestionTable', //这个id是render的id，可以用于表格reload时引用
                            url: 'http://localhost:8080/paperQuestion/selectByPage',  // 请求地址
                            method: 'get',
                            toolbar: '#searchToolBar',   //设置toolbar
                            page: true,  //启用表格分页功能
                            limit: 7,
                            cols: [[     //表头
                                { type: 'checkbox' },
                                { field: 'paperQuestionId', title: 'Id', sort: true},
                                { field: 'questionType', title: '题型' },
                                {
                                    field: 'questionContentInfo', title: '题干',
                                    templet: function (res) {
                                        return "<span>" + res.questionContentInfo.title + "</span>"
                                    }
                                },
                                { field: 'score', title: '分数' },
                                { field: 'difficult', title: '难度', sort: true },
                                { field: 'createTime', title: '创建时间', sort: true },
                                { fixed: 'right', title: '操作', toolbar: '#handleDemo' }
                            ]],
                            where: {
                                subjectName: sessionStorage.getItem("addQuestionSubjectName"),
                                levelName: sessionStorage.getItem("addQuestionLevelName"),
                                questionType:sessionStorage.getItem("addQuestionQuestionType")
                            },
                            done: function (res, curr, count) {
                                // 根据字段questionType的值 判断题型
                                $("[data-field='questionType']").children().each(function () {
                                    if ($(this).text() == '1') {
                                        $(this).text('单选题');
                                    } else if ($(this).text() == '2') {
                                        $(this).text('多选题');
                                    } else if ($(this).text() == '3') {
                                        $(this).text('判断题');
                                    }
                                })

                            }
                        });

                    });
                }
            });
        }

        function delQuestion(index){
            let qid="qs"+index;
            $("#titleContent #"+qid+"").remove();
        }


    </script>
</body>

</html>